<template>
    <div class="company-choose-wrapper">
        <el-dialog title="选择承运商" width="800px  " class="tableDialog" :visible.sync="detailVisible">

            <div class="dialog-container">
                <div class="container">
                    <section class="left-container">
                        <!-- 主分类 -->
                        <div>
                            <h4 class="dicTypeTitle">承运商类型</h4>
                            <ul class="dict_parentWrap">
                                <li v-for="item in  $dictUtils.getDictList('transCompanyType')" @click='changeType(item.value), isChecked($event)'>{{item.label}}</li>
                            </ul>
                        </div>
                    </section>
                    <section class="right-container">
                        <!-- 列表 -->
                        <div class="contentWrap dialogSearch">
                            <el-input v-model="queryForm.names" placeholder='输入承运商名称搜索'>
                                <i slot="suffix" class="el-input__icon el-icon-search" @click='queryList()'></i>
                            </el-input>
                            <el-table size="mini" :data="tableData" row-key="id" border style="margin-top: 10px"
                                :header-cell-style="{
              'background-color': '#eeeeee !important',
            }"
                                :row-class-name="tableRowClassName" :default-sort="{prop: 'label', order: 'descending'}"
                                @selection-change="handleSelectionChange">
                                <el-table-column type="index" width="60" label="序号" align="center"> </el-table-column>

                                <el-table-column prop="names" label="名称"></el-table-column>
                                <el-table-column prop="contactName" label="联系人"></el-table-column>
                                <el-table-column prop="contactPhone" label="联系电话"></el-table-column>
                                <el-table-column type="selection" align="center" width="50">
                                </el-table-column>
                            </el-table>

                            <!-- 自定义表头 -->

                            <el-pagination background @current-change="handleCurrentChange" :current-page.sync="page.pageNo"
                                :page-size="page.pageSize" layout="total,prev, pager, next" :total="page.total">
                            </el-pagination>

                        </div>
                    </section>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick>确定</el-button>
                <el-button size="small" @click="close()">取消</el-button>
            </span>
        </el-dialog>
        <el-dialog title="选择无车承运人" width="800px  " class="tableDialog" :visible.sync="noCarCompanyVisible">
            <div class="dialog-container">
                <div class="container">
                    <section class="right-container">
                        <!-- 列表 -->
                        <div class="contentWrap dialogSearch">
                            <el-table size="mini" :data="companyData" row-key="id" border style="margin-top: 10px"
                                :header-cell-style="{ 'background-color': '#eeeeee !important',}"
                                :row-class-name="tableRowClassName"
                                @current-change="selectDate">
                                <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
                                <el-table-column prop="companyCode" label="无车承运平台编号"></el-table-column>
                                <el-table-column prop="companyName" label="无车承运平台名称"></el-table-column>
                            </el-table>
                        </div>
                    </section>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="close()">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        planAddCompanys,getCompanyList
    } from '@/api/transplan/transplan.js'
    export default {
        data() {
            return {
                detailVisible: false,
                noCarCompanyVisible: false,
                page: {
                    pageSize: 10,
                    pageNo: 1,
                    total: 0
                },
                tableData: [],
                companyData: [],
                queryForm: {
                    names: ''
                },
                selectDatas: '',
                ids: '',
                transType: 1,
                planId: '',
                companyCode: '',
                companyName: ''
            }
        },
        methods: {
            init(method, row) {
                if (method === 'execPlanCompany') {
                    this.planId = row
                    this.detailVisible = true
                }else if (method === 'noCarCompany'){
                    this.planId = row
                    this.transType = '2'
                    this.noCarCompanyVisible = true;
                    this.loading = true
                    this.$http({
                      url: '/transportPlan/plan/queryCompanyList',
                      method: 'get',
                    }).then(({
                      data
                    }) => {
                      if (data.code === '200') {
                        this.companyData = data.result
                        this.loading = false
                      }
                    })
                }
            },
            selectDate(val){
                this.companyCode = val.companyCode
                this.companyName = val.companyName
                this.$confirm('确定要派车给“'+this.companyName+'”吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then((res) => {
                  this.loading = true
                  planAddCompanys({
                      planId: this.planId,
                      companyCode: this.companyCode,
                      companyName: this.companyName,
                      transType: this.transType
                  }).then(({
                      data
                  }) => {
                      if (data.code === '200') {
                          this.$message({
                              type: 'success',
                              message: '派车成功!'
                          })
                      }
                  })
                  this.detailVisible = false
                  this.noCarCompanyVisible = false
                  this.$emit('refreshDataList')
                })
            },
            // 改变分类
            changeType(row) {
                this.transType = row
                this.getCompanyList(this.page, row, '', '', '', 1)
            },
            // 显示当前分类
            isChecked(e) {
                const types = document.getElementsByClassName('dict_parentWrap')[0].childNodes
                types.forEach(item => {
                    item.classList.remove('active')
                })
                e.target.classList.add('active')
            },
            doSubmit() {
                this.ids = ''
                this.selectDatas.forEach(row => {
                    this.ids += (row.id + ',')
                })
                planAddCompanys({
                    planId: this.planId,
                    companyIds: this.ids,
                    transType: this.transType
                }).then(({
                    data
                }) => {
                    if (data.code === '200') {
                        this.$message({
                            type: 'success',
                            message: '派车成功!'
                        })
                        this.detailVisible = false
                        this.$emit('refreshDataList')
                    }
                })
                
            },
            close() {
                this.queryForm = {}
                this.detailVisible = false
                this.noCarCompanyVisible = false
            },
            getCompanyList(params, props, orderName, orderByAORC, queryNames, queryState) {
                getCompanyList({
                    pageSize: params.pageSize,
                    pageNo: params.pageNo,
                    props: props,
                    orderBy: orderName,
                    orderByAORC: orderByAORC,
                    names: queryNames,
                    state: queryState
                }).then((res) => {
                    if (res.data.code === '200') {
                        console.log(1423)
                        console.log(res)
                        this.tableData = res.data.result.list
                        this.page.total = res.data.result.count
                    }
                    this.loading = false
                })
            },
            queryList() {
                this.getCompanyList(this.page)
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`)
                this.page.pageNo = val
            },
            handleSelectionChange(val) {
                this.selectDatas = val
            },
            tableRowClassName({
                row,
                rowIndex
            }) {
                if (rowIndex % 2 === 1) {
                    return 'warning-row'
                } else {
                    return 'success-row'
                }
            }
        },
        mounted() {
        }
    }
</script>

<style lang="scss" scoped>
    /*@import '~@/assets/scss/model.scss';*/
    .company-choose-wrapper {
        ::v-deep.el-dialog {
            .el-dialog__body {
                .dialog-container {
                    width: 100%;
                }

                .container {
                    width: 100%;
                    /*height: 500px;*/
                    display: flex;
                }

                .left-container {
                    width: 180px;
                    overflow: auto; //!*当内容超过，出现滚动条*!
                    background: #FFFFFF;
                    box-shadow: 0px 0px 6px 0px rgba(4, 0, 0, 0.1);
                    border-radius: 6px;
                    // margin-right: 10px;
                    height: 450px;

                    .dicTypeTitle {
                        padding-left: 15px;
                        margin: 12px 0 10px;
                    }

                    .dict_parentWrap {
                        list-style: none;
                        padding-left: 0;
                        margin: 0;

                        li {
                            line-height: 32px;
                            padding-left: 26px;
                        }

                        li.active {
                            background-color: rgba(24, 144, 255, 0.2);
                            color: #1890FF;
                        }

                        li:hover {
                            background: rgba(24, 144, 255, 0.2);
                            cursor: pointer;
                        }
                    }
                }

                .right-container {
                    width: 100%;
                    margin-left: 10px;

                    .el-table {
                        td:last-child .cell {
                            padding-left: 0;
                        }
                    }
                }
            }
        }
    }
</style>
